<template>
  <div>
    <the-layoutFilterBox v-on:getChildData="getChildData" v-on:getChildDataId="getChildDataId"></the-layoutFilterBox>
    <div>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="24" v-for="(o, indexTableData) in tableData" :key="indexTableData">
              <el-popover width="100%" trigger="click">
                <el-card class="box-card">
                  <div class="text item">
                    <p v-for="(item, posDesc) in o.posDesc" :key="posDesc">{{ item }}</p>
                  </div>
                </el-card>
                <el-card slot="reference" :body-style="{ padding: '0px' }" shadow="always">
                  <div style="padding: 14px; text-align: left;">
                    <div class="card-left" style="float: left;   width: 50%;">
                      <div slot="header" class="clearfix">
                        <span>
                          {{ o.position}}[{{ o.city }}]
                          <time class="time">{{ o.publishTime }}</time>
                        </span>
                      </div>
                      <div class="text item">
                        <span>{{ o.salary}} {{ o.exp }}/{{ o.edu }}</span>
                      </div>
                      <div class="text item">
                        <span v-for="(item, indexTagList) in o.tagList" :key="indexTagList">
                          <el-tag>{{ item }}</el-tag>
                        </span>
                      </div>
                    </div>

                    <div class="card-rirht" style="float: right; width: 50%;">
                      <div slot="header" class="clearfix">
                        <span>{{ o.companyName }}</span>
                      </div>
                      <div class="text item">
                        <span v-for="(item, indexNature) in o.companyNature" :key="indexNature">
                          <el-tag type="info">{{ item }}</el-tag>
                        </span>
                      </div>
                      <div class="text item">
                        <span>{{ o.stage }}/{{ o.scale }}</span>
                      </div>
                      <div class="text item">
                        <span v-for="(item, index) in o.advantage" :key="index">
                          <el-tag type="danger">{{ item }}</el-tag>
                        </span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-popover>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <el-button  class = "subscription" @click= "commitSubscription" >订阅</el-button>
      <the-pagination
        :total="total"
        v-on:getCurrentData="getCurrentData"
        v-on:getSizeData="getSizeData"
      ></the-pagination>
    </div>
  </div>
</template>

<style>
.subscription {
  height: 40px;
  text-align: center;
  color: #1989fa;
  position: fixed;
	z-index:99;
  right:10px; bottom:50px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
li {
  text-overflow: ellipsis;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

<script>
import pagination from "../components/pagination";
import { requestSearchPositions } from "../api/index";
import { requestSubscription } from "../api/index"
import FilterBox from "../components/FilterBox.vue";

export default {
  name: "Search",
  components: {
    "the-pagination": pagination,
    "the-layoutFilterBox": FilterBox
  },
  methods: {
    getPositions() {
      let requestParams = Object.assign(this.filterTerm, this.pageInfo);
      requestSearchPositions(requestParams).then(data => {
        this.tableData = data.result.Hits;
        this.total = data.result.totalFind;
      });
    },
    getChildData(val) {
      this.filterTerm = val;
      this.getPositions();
    },
    getChildDataId(val){
      this. subscriptionInfo = val;
    },
    getCurrentData: function(val) {
      this.pageInfo["page"] = val;
      this.getPositions();
    },
    getSizeData: function(val) {
      this.pageInfo["maxEle"] = val;
      this.getPositions();
    },
    commitSubscription(){
      let openId =this.$route.query.openid
      let type =this.$route.query.type
      if (openId&&type){
        requestSubscription({openId: openId, type: type}, this.subscriptionInfo).then(data =>{
          this.$message({
              message: data.message,
              type: data.code == "SUCCESS" ? "success":"error" 
            });
        })
      }else{
        this.$message({
              message: "请登陆后再订阅",
              type: "error" 
            });
      }

    }
  },
  data() {
    let tableData = [];
    let total = 0;
    requestSearchPositions().then(data => {
      this.tableData = data.result.Hits;
      this.total = data.result.totalFind;
    });

    return {
      tableData: tableData,
      total: total,
      filterTerm: {},
      pageInfo: {},
      subscriptionInfo:{}
    };
  }
};
</script>